import { Avatar, Icon } from "@rneui/themed";
import { StyleSheet, Text, View } from "react-native";

export default function Self() {
    return (
        <View style={styles.mainContent}>
            <View style={styles.avatarTitle} onTouchEnd={() => { console.log('touch') }}>
                <View style={{ paddingHorizontal: 5 }}>
                    <Avatar
                        size={64}
                        rounded
                        source={{ uri: 'https://assets.aiolia.top/Pictures/Others/116359b4ccf19917.jpg' }}
                    />
                </View>
                <Text style={{ fontSize: 22, fontWeight: 'bold' }}>樊晨煜</Text>
                <View style={styles.itemRightMark}>
                    <Icon name="chevron-right" type="feather" />
                </View>
            </View>

            <View style={{ marginTop: 12 }}>
                <SelfPageItem
                    icon={<Icon name="power" type="feather" size={16} />}
                    title='退出登录'
                    rightComponent={<Icon name="chevron-right" type="feather" />}
                />
            </View>
        </View>
    )
}

function SelfPageItem(props) {
    return (
        <View style={styles.itemContainer} onTouchEnd={props.onTouch}>
            <View style={styles.itemIcon}>
                {
                    props.icon
                }
            </View>
            <Text style={styles.itemTitle}>
                {props.title}
            </Text>
            <View style={styles.itemRightMark}>
                {
                    props.rightComponent
                }
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    mainContent: {
        width: '100%',
        height: '100%',
    },
    avatarTitle: {
        width: '100%',
        paddingVertical: 5,
        display: 'flex',
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection: 'row'
    },
    itemContainer: {
        width: '100%',
        paddingVertical: 5,
        display: 'flex',
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection: 'row'
    },
    itemIcon: {
        marginHorizontal: 4
    },
    itemTitle: {
        fontSize: 16,
    },
    itemRightMark: {
        marginLeft: 'auto',
        marginRight: 10
    }
})